<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册</title>

<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/tooplate.css">
</head>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
//# sourceMappingURL=file.js.map
<script>
	$(function(){
		$("#YanZhengMa").click(function(){
			$("#YanZhengMa").prop("src","/BadBanana/YanZhengMa?id="+new Date());
		});

		
		
		// 自定义校验规则
		$.validator.addMethod("checkUser",
				function(value,element,params){
					var pass = false;
					// value: 输入内容，需要给数据库对比
					$.ajax({
						url: "/BadBanana/UserServlet",
						data: {
							"method":"checkUser",
							"username":value
						},
						success:function(data){
							// data.isExists -> true -> 校验不通过
							// data.isExists -> false -> 校验通过
							pass = !data.isExists ;
						},
						dataType: "json",
						async: false // 必须同步
					});
					return pass; // 返回true表示校验通过

		});
		
		
		
		// 自定义校验规则
		$.validator.addMethod("checkYanZhengMa",
				function(value,element,params){
					var pas = false;
					// value: 输入内容，需要给数据库对比
					$.ajax({
						url: "/BadBanana/UserServlet",
						data: {
							"method":"checkCode",
							"checkcode":value
						},
						success:function(data){
							// data.isExists -> true -> 校验不通过
							// data.isExists -> false -> 校验通过
							pas = data.isExists ;
						},
						dataType: "json",
						async: false // 必须同步
					});
					return pas; // 返回true表示校验通过

		});		
		
		
		
		
		$("#registForm").validate({
			rules:{
				username:{
					checkUser:true,
					required:true,
					minlength:6,
					maxlength:16
	
				},
				password:{
					required:true,
					digits:true,
					minlength:6,
					maxlength:20
				},
				passwordAgin:{
					required:true,
					digits:true,
					equalTo:"[name='password']"
				},
				email:{
					required:true,
					email:true
				},
				phone:{
					required:true,
					digits:true,
					minlength:11
				},

				address:{
					required:true
				},
				checkcode:{
					required:true,
					checkYanZhengMa:true
				}
				
			},
			messages:{
				username:{
					required:"用户名不能为空",
					minlength:"用户名最小长度不能少于6位",
					maxlength:"用户名最大长度不能超过16位",
					checkUser: "用户名已存在"
				},
				password:{
					required:"密码不能为空",
					digits:"密码只能为数字",
					minlength:"密码最小长度不能少于6位",
					maxlength:"密码用户名最大长度不能超过20位"
				},
				passwordAgin:{
					required:"密码不能为空",
					digits:"密码只能为数字",
					equalTo:"两次密码不一致"
				},
				email:{
					required:"邮箱不能为空",
					email:"邮箱格式不对"
				},
				phone:{
					required:"电话不能为空",
					digits:"电话只能为数字",
					minlength:"电话长度不能少于11位"
				},

				address:{
					required:"地址不能为空"
				},
				checkcode:{
					required:"验证码不能为空",
					checkYanZhengMa:"验证码错误"
				}
			}
		});
	});
</script>
<body id="register">
	<div class="container">
		<div class="row tm-register-row">
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-register-col-l">
				<form action="/BadBanana/UserServlet" method="post" id="registForm" id="registForm">
				<input type="hidden" name="method" value="register">
					<div class="mb-2">
					
						<label class="mr-4"> <input class="with-gap" name="sex"
							type="radio" value="mr" /> <span>Mr.</span>
						</label> 
						
						<label class="mr-4"> <input class="with-gap" name="sex"
							type="radio" value="ms" /> <span>Ms.</span>
						</label> 
						
						<label> <input class="with-gap" name="sex" type="radio"
							value="mrs" /> <span>Mrs.</span>
						</label>
						
					</div>

					<div class="input-field">
					<div>
						<input placeholder="User Name" id="username" name="username"
							type="text" class="validate">
							</div>
					</div>
					<div class="input-field">
					<div>
						<input placeholder="Password" id="password" name="password"
							type="password" class="validate">
							</div>
					</div>
					<div class="input-field">
					<div>
						<input placeholder="Password Agin" id="passwordAgin" name="passwordAgin"
							type="password" class="validate">
							</div>
					</div>
					<div class="input-field">
					<div>
						<input placeholder="Email" id="email" name="email" type="text"
							class="validate">
							</div>
					</div>
					<div class="input-field">
					<div>
						<input placeholder="Phone" id="phone" name="phone" type="text"
							class="validate">
							</div>
					</div>
					<div class="input-field">
					<div>
						<input placeholder="Address" id="address" name="address"
							type="text" class="validate">
							</div>
					</div>
					<div class="row">
					<div>
						<div class="input-field">
						<div>
							<input placeholder="CheckCode" id="checkcode" name="checkcode"
								type="text" class="validate">
								</div>
								</div>
						</div>
						
						<div>
							<img src="/BadBanana/YanZhengMa" alt="验证码"  id="YanZhengMa" name="YanZhengMa">
						</div>
					</div>
					<br>
					<div class="">
						<button type="submit"
							class="waves-effect btn-large btn-large-white px-4 black-text">注册</button>
					</div>
				</form>
			</div>
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-register-col-r">
				<header class="mb-5">
					<h3 class="mt-0 text-white">注册新用户</h3>
					<p class="grey-text">请输入您的完整资料进行注册</p>

				</header>

			</div>
		</div>
		<footer class="row tm-mt-big mb-3"> </footer>
	</div>

</body>

</html>